$n-blue: #4fb7ff

.toggle
  > input
    position: absolute
    visibility: hidden

  > label
    display: block
    position: relative
    cursor: pointer
    outline: none
    user-select: none

$trans: background 0.4s

.toggle-round-flat
  > label
    width: 60px
    height: 30px
    border-color: #dddddd
    border-radius: 30px
    transition: $trans

    &:before, &:after
      display: block
      position: absolute
      content: ""

    &:before
      top: 1px
      left: 1px
      bottom: 1px
      right: 1px
      background-color: #ffffff
      border-radius: 30px
      transition: $trans

    &:after
      top: 2px
      left: 2px
      bottom: 2px
      width: 26px
      background-color: #dddddd
      border-radius: 26px
      transition: margin 0.4s, $trans

  > input:checked + label
    background-color: $n-blue

  > input:checked + label:after
    margin-left: 30px
    background-color: $n-blue